<template>
  <div class="shopping-cart">
    <h2>购物车</h2>
    <div class="cart-items">
      <div v-for="product in cart" :key="product.id" class="cart-item">
        <div class="product-info">
          <span>{{ product.name }} - ￥{{ product.price }}</span>
          <button @click="removeProduct(product.id)" class="remove-btn">×</button>
        </div>
        <div class="quantity-control">
          <button 
            @click="decrementQuantity(product.id)"
            :disabled="product.quantity <= 1"
          >-</button>
          <span>数量：{{ product.quantity }}</span>
          <button @click="incrementQuantity(product.id)">+</button>
        </div>
      </div>
    </div>
    <div class="total-price">
      总价：￥{{ totalPrice }}
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['cart']),
    ...mapGetters(['totalPrice'])
  },
  methods: {
    ...mapMutations([
      'INCREMENT_QUANTITY',
      'DECREMENT_QUANTITY',
      'REMOVE_PRODUCT'
    ]),
    incrementQuantity(productId) {
      this.INCREMENT_QUANTITY(productId)
    },
    decrementQuantity(productId) {
      this.DECREMENT_QUANTITY(productId)
    },
    removeProduct(productId) {
      this.REMOVE_PRODUCT(productId)
    }
  }
}
</script>

<style scoped>
.shopping-cart {
  max-width: 600px;
  margin: 20px auto;
  background: white;
  padding: 20px;
}

h2 {
  text-align: center;
  color: #333;
}

.cart-item {
  margin: 15px 0;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.product-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.quantity-control {
  display: flex;
  align-items: center;
}

.quantity-control button {
  width: 30px;
  height: 30px;
  margin: 0 5px;
  border: 1px solid #ddd;
  background: #f5f5f5;
  cursor: pointer;
}

.quantity-control button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.total-price {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
}

.remove-btn {
  background: #ff4444;
  color: white;
  border: none;
  padding: 2px 8px;
  border-radius: 50%;
  cursor: pointer;
}
</style>